<template>
    <div class="selectLocation">
      <section class="searchBox">
        <div class="currentLocation">{{currentCity}}</div>
        <div class="inputBox"><input ref="searchText" type="text" placeholder="输入您想要搜索的详细地点"/></div>
        <div class="searchBtn" @touchstart="KeyUpSearch">搜索</div>
      </section>
      <section class="map">
        <div id="mapContainer"></div>
      </section>
      <section class="result">
        <scroll class="result-scroll" :data="searchData">
          <div>
            <ul class="nearby" id="nearby" ref="nearBy">
              <li class="nearby-item" v-for="item in searchData" @click="selectLocation(item.pname+item.cityname+item.address+item.name)">
                <p class="name">{{item.name}}</p>
                <p class="area">{{item.pname}}{{item.cityname}}{{item.address}}</p>
              </li>
              <li class="nearby-item flex" v-if="searchData">
                <div class="left">
                  <p class="left-name">无法获取定位，请刷新重试</p>
                  <p class="left-area">这里是...</p>
                </div>
                <div class="right">
                  <img class="right-img" src="../../../../static/img/reLocated.png"/>
                  <p class="right-content">重新定位</p>
                </div>
              </li>
            </ul>
          </div>
        </scroll>
      </section>
      <div id="tempsecond" style="display:none"></div>
    </div>
</template>

<script>
    import Scroll from "../../scroll/scroll";

    export default {
      components: {Scroll},
      name: "select-location",
      data () {
        return {
          currentCity: '广州市',
          searchData: []
        }
      },
      mounted () {
        this.getCurrentLocation(this.currentCity)
      },
      methods: {
        KeyUpSearch () {
          var txt = this.$refs.searchText.value
          this.getCurrentLocation(txt)
        },
        getCurrentLocation(txt) {
          var _this = this
          let map = new AMap.Map("mapContainer", {
            resizeEnable: true
          });
          AMap.service(["AMap.PlaceSearch"], function() {
            var placeSearch = new AMap.PlaceSearch({
              //构造地点查询类
              pageSize: 12,
              pageIndex: 1,
              city: _this.currentCity,
              map: map,
              //城市
              cityLimit: 'true',
              panel: 'tempsecond'//搜索结果的展示面板对元素id，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整，
              //所以我在页面随便写了一个<div id="temp" style="display:none"></div>
            });
            //关键字查询
            placeSearch.search(txt, function(status, result) {
              if (status == 'complete' && result.info == 'OK') {
                //这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述
                _this.searchData = result.poiList.pois
              }
            })
          })
          // setHeightKeyWord('nearby',txt,'#ec6045',false)
        },
        selectLocation (loc) {
          window.localStorage.setItem('receptionAddress', loc)
          setTimeout(() => {
            this.$router.go(-1)
          }, 20)
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .selectLocation{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 200;
    background-color: $bc;
    display: flex;
    flex-direction: column;
    .searchBox{
      @include font-dpr(28px);
      color: $fbc;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      padding: 0 20px 0 34px;
      line-height: 80px;
      .currentLocation{
        &:after{
          content: "";
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url("../../../../static/img/downArrow.png") no-repeat center center;
          background-size: 100% 100%;
          margin-left: 12px;
        }
      }
      .inputBox{
        flex: 1;
        margin: 0 12px;
        input{
          @include font-dpr(24px);
          width: 100%;
          padding-left: 55px;
          background-image: url("../../../../static/img/search.png");
          background-repeat: no-repeat;
          background-position: center left 14px;
          background-size: 32px 32px;
          outline: none;
          background-color: #ebebeb;
          border: none;
          border-radius: 5px;
          line-height: 54px;
        }
      }
      .searchBtn{}
    }
    .map{
      padding-bottom: 76%;
      width: 100%;
      position: relative;
      #mapContainer{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .result{
      flex: 1;
      overflow: hidden;
      .result-scroll{
        overflow: hidden;
        width: 100%;
        height: 100%;
        .nearby{
          padding-left: 18px;
          background-color: #ffffff;
          overflow: hidden;
          .nearby-item{
            border-bottom: 1px solid $borderCor;
            font-size: 0;
            padding: 0 60px 0 50px;
            overflow: hidden;
            .name{
              margin-top: 20px;
              color: $fbc;
              @include font-dpr(28px);
            }
            .area{
              margin-top: 5px;
              color: $fgc;
              @include font-dpr(24px);
            }
            .left{
              flex: 1;
              .left-name{
                margin-top: 20px;
                color: $fbc;
                @include font-dpr(28px);
              }
              .left-area{
                margin-top: 5px;
                color: $fgc;
                @include font-dpr(24px);
              }
            }
            .right{
              text-align: center;
              .right-img{
                height: 32px;
                width: 32px;
              }
              .right-content{
                color: $priceCor;
                @include font-dpr(24px);
              }
            }
            &:last-child {
              border: none;
            }
          }
          .flex{
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
</style>
